import Vue from 'vue';
import {
  Container,
  Header,
  Aside,
  Main,
  Row,
  Col,
  Scrollbar,
  Card,
  Loading,
  Menu,
  Submenu,
  MenuItem,
  Tabs,
  TabPane,
  Breadcrumb,
  BreadcrumbItem,
  Progress,
  Form,
  FormItem,
  Radio,
  RadioGroup,
  Checkbox,
  CheckboxGroup,
  DatePicker,
  Table,
  TableColumn,
  Pagination,
  Input,
  InputNumber,
  Image,
  Button,
  ButtonGroup,
  Upload,
  Message,
  Select,
  Option,
  ColorPicker,
  Dropdown,
  DropdownMenu,
  DropdownItem,
  Collapse,
  CollapseItem,
  Tag,
  Dialog,
  Tooltip,
  Steps,
  Step,
  Popover,
  Empty,
  RadioButton,
  Timeline,
  TimelineItem,
  InfiniteScroll,
  Divider,
  MessageBox,
  Cascader,
  Carousel,
  CarouselItem,
  Slider,
  Switch,
  Tree,
  Alert
} from 'element-ui';
import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
import QuarterPicker from '@/components/QuarterPicker';
import DrawerTransition from '@/components/DrawerTransition';
import 'element-ui/lib/theme-chalk/display.css';

Vue.use(Container);
Vue.use(Header);
Vue.use(Aside);
Vue.use(Main);
Vue.use(Row);
Vue.use(Col);
Vue.use(Scrollbar);
Vue.use(Card);
Vue.use(Menu);
Vue.use(Submenu);
Vue.use(MenuItem);
Vue.use(Tabs);
Vue.use(TabPane);
Vue.use(Breadcrumb);
Vue.use(BreadcrumbItem);
Vue.use(Progress);
Vue.use(Form);
Vue.use(FormItem);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(DatePicker);
Vue.use(QuarterPicker);
Vue.use(DrawerTransition);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(Pagination);
Vue.use(Input);
Vue.use(InputNumber);
Vue.use(Image);
Vue.use(Button);
Vue.use(ButtonGroup);
Vue.use(Upload);
Vue.use(Select);
Vue.use(Option);
Vue.use(ColorPicker);
Vue.use(Dropdown);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Collapse);
Vue.use(CollapseItem);
Vue.use(Tag);
Vue.use(Dialog);
Vue.use(Tooltip);
Vue.use(Steps);
Vue.use(Step);
Vue.use(Popover);
Vue.use(Empty);
Vue.use(RadioButton);
Vue.use(Timeline);
Vue.use(TimelineItem);
Vue.use(InfiniteScroll);
Vue.use(Divider);
Vue.use(Cascader);
Vue.use(Carousel);
Vue.use(CarouselItem);
Vue.use(Loading);
Vue.use(Slider);
Vue.use(Switch);
Vue.use(Tree);
Vue.use(Alert);

Vue.component(CollapseTransition.name, CollapseTransition);
Vue.prototype.$message = $message;
Vue.prototype.$loading = $loading;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$alert = MessageBox.alert;

// $message
// this.$message方式调用
function $message(options) {
  if (typeof options === 'string') options = { message: options };
  options.duration = options.duration || 1600;
  Message(options);
}
// this.$message.type方式调用(关闭其它Message提示)
['success', 'error', 'warning', 'info'].forEach((type) => {
  $message[type] = function (msgStr) {
    Message.closeAll();
    const options = typeof msgStr === 'string' ? { message: msgStr } : msgStr;
    options.type = type;
    options.duration = options.duration || 1600;
    Message(options);
  };
});

// $loading
let loadingCount = 0;
function $loading(handle, options) {
  if (typeof options === 'string') options = { text: options };
  options = { ...options, background: options?.target ? '' : 'rgba(0, 0, 0, 0.7)' };
  loadingCount += 1;
  const loadingInstance = Loading.service(options);
  handle = handle instanceof Function ? handle() : handle;
  return handle.finally(() => {
    loadingCount -= 1;
    if (loadingCount === 0) loadingInstance.close();
  });
}

export { $message, $loading };
